import { nextTick } from 'vue';

//index.js
export default function commonDirectives(app) {
  // 注册第一个自定义指令，例如：获取焦点
  app.directive('focus', {
    mounted(el) {
      el.focus();
    }
  });

  // 注册第二个自定义指令，例如：判空显示
  app.directive('empty-check', {
    mounted(el, binding) {
      nextTick(() => {
        const content = el.innerHTML.trim();
        if (!content || content === 'undefined' || content === 'null') {
          el.textContent = binding.value || '默认字符';
        }
      })
    }
  });

  /* 鼠标提示信息 */
  app.directive('tooltip', {
    mounted(el, binding) {
      let tooltip;

      // 检查内容是否超出标签宽度
      const isOverflowing = () => {
        console.log(el, el.scrollWidth, el.clientWidth, el.scrollWidth > el.clientWidth)
        return el.scrollWidth > el.clientWidth;
      };

      // 创建工具提示
      const createTooltip = () => {
        tooltip = document.createElement('div');
        tooltip.textContent = binding.value || el.textContent;
        tooltip.style.position = 'absolute';
        tooltip.style.backgroundColor = '#333';
        tooltip.style.color = '#fff';
        tooltip.style.padding = '5px 10px';
        tooltip.style.borderRadius = '4px';
        tooltip.style.zIndex = '1000';
        tooltip.style.maxWidth = `${el.clientWidth * 2}px`; // 限制为元素宽度

        document.body.appendChild(tooltip);

        const rect = el.getBoundingClientRect();
        tooltip.style.top = `${rect.bottom + 5}px`; // 调整到元素下方5px处
        tooltip.style.left = `${rect.left + 10}px`;
      };

      // 鼠标移入事件
      el.addEventListener('mouseenter', () => {
        if (isOverflowing()) {
          createTooltip();
        }
      });

      // 鼠标移出事件
      el.addEventListener('mouseleave', () => {
        if (tooltip) {
          document.body.removeChild(tooltip);
          tooltip = null;
        }
      });
    }
  });

  /* 元素外部事件 */
  app.directive('click-outside', {
    mounted(el, binding) {
      el.clickOutsideEvent = function (event) {
        if (!(el === event.target || el.contains(event.target))) {
          binding.value(event);
        }
      };
      document.addEventListener('click', el.clickOutsideEvent);
    },
    unmounted(el) {
      document.removeEventListener('click', el.clickOutsideEvent);
    }
  });

  // 自动聚焦指令
  app.directive('focus', {
    mounted(el) {
      el.focus();
    }
  });

  /* 元素大小发生变化的回调，监听窗口大小 */
  app.directive('resize', {
    mounted(el, binding) {
      if (window.ResizeObserver) {
        // Use ResizeObserver if available
        const resizeObserver = new ResizeObserver(entries => {
          for (let entry of entries) {
            binding.value(entry);
          }
        });
        resizeObserver.observe(el);
        el._resizeObserver = resizeObserver;
      } else {
        // Fallback for browsers that do not support ResizeObserver
        const handleResize = () => {
          binding.value({
            contentRect: el.getBoundingClientRect()
          });
        };
        window.addEventListener('resize', handleResize);
        el._resizeHandler = handleResize;
        handleResize();
      }
    },
    unmounted(el) {
      if (el._resizeObserver) {
        el._resizeObserver.disconnect();
      }
      if (el._resizeHandler) {
        window.removeEventListener('resize', el._resizeHandler);
      }
    }
  });
  

  /* 点击复制指令 */
  app.directive('copy', {
    // 使用 `mounted` 替代 `bind`
    mounted(el, binding) {
        // 创建复制函数
        el.copyFn = () => {
            console.log('点击的是哪个DOM', el);
            
            // 获取自定义内容，如果没有指定，则默认复制元素的文本内容
            const contentToCopy = binding.value || el.innerText;

            // 创建一个隐藏的文本区域来复制内容
            const textarea = document.createElement('textarea');
            textarea.value = contentToCopy;
            document.body.appendChild(textarea);
            textarea.select();

            // 复制内容到剪切板
            try {
                const successful = document.execCommand('copy');
                const msg = successful ? '复制成功，可以粘贴啦' : '复制失败';
                alert(msg);
            } catch (err) {
                console.error('复制失败', err);
                alert('当前浏览器不支持一键复制功能，请手动复制粘贴');
            }

            document.body.removeChild(textarea);
        };

        // 绑定点击事件
        el.addEventListener('click', el.copyFn);
    },
    
    // 使用 `updated` 替代 `componentUpdated`
    updated(el, binding) {
        // 可以根据需要更新指令的行为
    },

    // 使用 `beforeUnmount` 替代 `unbind`
    beforeUnmount(el) {
        // 移除点击事件
        el.removeEventListener('click', el.copyFn);
    }
  });
  
  // 可以继续添加更多的自定义指令
  // ...
}
